<template>
  <basic-container>
    <avue-tabs :option="tabOption" @change="tabChange"></avue-tabs>
    <div v-if="type.prop==='welfare'">
      <avue-crud
        :option="optionWelfare"
        :data="dataWelfare"
        :page="welfarePage"
        v-model="welfareForm"
        @search-change="welfareSearchChange"
        @search-reset="welfareSearchReset"
        @current-change="welfareCurrentChange"
        @size-change="welfareSizeChange"
        @on-load="welfareOnLoad"
      >
        <template slot="state" slot-scope="{row}">
          <span>{{row.sexName}}</span>
        </template>
        <template slot="menu" slot-scope="{row}">
          <el-tag size="small" class="pointer mr10" @click="welfareInfo(row.id)">查看详情</el-tag>
        </template>
      </avue-crud>
    </div>
    <div v-else-if="type.prop==='buy'">
      <avue-crud
        :option="optionBuy"
        :data="dataBuy"
        :page="buyPage"
        v-model="form"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="buyOnLoad"
      >
        <template slot="state" slot-scope="{row}">
          <span>{{row.sexName}}</span>
        </template>
      </avue-crud>
    </div>
    <el-dialog title="福利详情" align="center" :visible.sync="dialogVisible" width="900px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="wechantAccount" label="微信账号" width="180"></el-table-column>
        <el-table-column prop="telephone" label="手机号" width="180"></el-table-column>
        <el-table-column prop="welfareType" label="福利类型"></el-table-column>
        <el-table-column prop="conment" label="金额/内容"></el-table-column>
        <el-table-column prop="isActivate" label="行为"></el-table-column>
        <el-table-column prop="tenantName" label="所属公司"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="infoTotal"
        @current-change="infoPage.current"
      ></el-pagination>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  getWalfareList,
  getSignList,
  getWalfareInfo,
  update,
  getNotice
} from "@/api/dept/user";
import { mapGetters } from "vuex";
import { getToken } from "@/util/auth";
export default {
  data() {
    return {
      dialogVisible: false,
      type: {
        prop: "welfare"
      },
      tabOption: {
        column: [
          {
            icon: "el-icon-info",
            label: "福利",
            prop: "welfare"
          },
          {
            icon: "el-icon-warning",
            label: "购买",
            prop: "buy"
          }
        ]
      },
      welfareForm: {},
      form: {},
      welfarePage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      buyPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      optionWelfare: {
        tip: false,
        addBtn: false,
        border: true,
        align: "center",
        index: false,
        viewBtn: false,
        selection: false,
        columnBtn: false,
        refreshBtn: false,
        searchBtn: false,
        editBtn: false,
        delBtn: false,
        menu: true,
        column: [
          {
            label: "微信号",
            prop: "wechatAccount",
            row: true,
            search: true
          },
          {
            label: "手机号/邮箱",
            prop: "name",
            row: true,
            hide: true,
            search: true
          },
          {
            label: "手机号",
            prop: "telephone",
            row: true,
            search: true
          },
          {
            label: "现金（单位：元）",
            children: [
              {
                label: "已解锁",
                prop: "amount"
              },
              {
                label: "未解锁",
                prop: "noamount"
              }
            ]
          },
          {
            label: "返佣（单位：元）",
            children: [
              {
                label: "已获得",
                prop: "rebates"
              }
            ]
          },
          {
            label: "代金券（单位：张）",
            children: [
              {
                label: "已解锁",
                prop: "chitcount"
              },
              {
                label: "已使用",
                prop: "uchitcount"
              },
              {
                label: "未解锁",
                prop: "nchitcount"
              }
            ]
          },
          {
            label: "礼品（单位：件）",
            children: [
              {
                label: "已解锁",
                prop: "giftcount"
              },
              {
                label: "已领取",
                prop: "ugiftcount"
              },
              {
                label: "未解锁",
                prop: "ngiftcount"
              }
            ]
          }
        ]
      },
      dataWelfare: [],
      optionBuy: {
        tip: false,
        addBtn: false,
        border: true,
        index: false,
        viewBtn: false,
        selection: false,
        columnBtn: false,
        refreshBtn: false,
        searchBtn: false,
        editBtn: false,
        menu: false,
        column: [
          {
            label: "微信账号",
            prop: "wechatAccount",
            row: true,
            search: true
          },
          {
            label: "手机号",
            prop: "telephone",
            row: true,
            search: true
          },
          {
            label: "内容类型",
            prop: "conment",
            row: true
          },
          {
            label: "内容名称",
            prop: "name",
            row: true
          },
          {
            label: "价格",
            prop: "yjprice",
            row: true
          },
          {
            label: "抵扣",
            prop: "cjprice",
            row: true
          },
          {
            label: "实付",
            prop: "price",
            row: true
          },
          {
            label: "所属公司",
            prop: "tenantName",
            row: true
          },
          {
            label: "下单时间",
            prop: "time",
            row: true
          }
        ]
      },
      dataBuy: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      infoPage: {
        current: 1,
        size: 10
      },
      infoTotal: 0,
      isRefresh: true
    };
  },
  created() {
    this.type = this.option.column[0];
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    //   tab 切换
    tabChange(column) {
      this.type = column;
      if (this.type.prop == "buy" && this.isRefresh) {
        this.isRefresh = false;
        this.buyOnLoad(this.buyPage);
      }
    },

    // 购买交易搜索重置
    searchReset() {
      this.buyPage.currentPage = 1;
      this.buyOnLoad(this.buyPage);
    },

    // 购买交易搜索
    searchChange(params) {
      this.buyPage.currentPage = 1;
      this.buyOnLoad(this.buyPage, params);
    },

    selectionChange(list) {
      this.selectionList = list;
    },

    currentChange(currentPage) {
      this.buyPage.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.buyPage.pageSize = pageSize;
    },

    // 购买交易列表
    buyOnLoad(buyPage, params = {}) {
      const param = {
        size: buyPage.pageSize,
        current: buyPage.currentPage,
        account: params.wechatAccount || "",
        phone: params.telephone || ""
      };
      getSignList(param).then(res => {
        const data = res.data.data;
        this.buyPage.total = data.total;
        this.dataBuy = data.records;
      });
    },

    // 福利-搜索重置
    welfareSearchReset() {
      this.welfarePage.currentPage = 1;
      this.welfareOnLoad(this.welfarePage);
    },
    // 福利-搜索
    welfareSearchChange(params) {
      this.welfarePage.currentPage = 1;
      this.welfareOnLoad(this.welfarePage, params);
    },

    // 福利 - 页面切换
    welfareCurrentChange(currentPage) {
      this.welfarePage.currentPage = currentPage;
    },

    // 福利 - 页面size
    welfareSizeChange(pageSize) {
      this.welfarePage.pageSize = pageSize;
    },

    // 福利列表
    welfareOnLoad(welfarePage, params = {}) {
      const param = {
        size: welfarePage.pageSize,
        current: welfarePage.currentPage,
        account: params.account || "",
        phone: params.phone || ""
      };

      getWalfareList(param).then(res => {
        const data = res.data.data;
        this.welfarePage.total = data.total;
        this.dataWelfare = data.records;
      });
    },

    // 福利详情
    welfareInfo(id) {
      const param = {
        openid: id,
        current: this.infoPage.current,
        size: this.infoPage.size
      };
      getWalfareInfo(param).then(res => {
        this.dialogVisible = true;
        const data = res.data.data;
        this.welfarePage.total = data.total;
        this.tableData = data.records;
      });
    }
  }
};
</script>

<style>
.avue-tabs {
  padding-top: 0;
}
.pointer {
  cursor: pointer;
}

.mr10 {
  margin-right: 10px;
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>
